<template>
   <div style="height:750px">
    <div style="height:700px">
      <el-table
        :data="
          contents.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
        <el-table-column label="用户id" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>s
        </el-table-column>
        <el-table-column label="用户名" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.sex }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户年龄" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.age }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tel }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.userstate == '派工中' ? 'danger':'success'"
            >{{ scope.row.userstate }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
   
            <el-button size="mini" type="info" @click="resetPass(scope.$index, scope.row)">重置密码</el-button>
          
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.sex" size="medium">
            <el-radio border label="男"></el-radio>
            <el-radio border label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="updateWorkers()">确 定</el-button>
      </div>
    </el-dialog>

    <div class="yema">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ::current-page-sync="currentPage"
        :page-sizes="[8, 10, 15]"
        :page-size="pagesize"
        layout="total,jumper,prev, pager, next,sizes"
        :total="contents.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  
  data() {
    return {
      id: 2,
      currentPage: 1,
      pagesize: 8,
      contents: [],
      dialogFormVisible: false,
      form: {
        username: "",
        age: "",
        sex: "",
        tel: "",
      },
      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.showTable();
  },
  methods: {
    showTable: function () {
      let params = {
        id: this.id,
      };
      this.$axios({
        method: "post",
        params: params,
        url: "/user/findWorkers",
      })
        .then((res) => {
          this.contents = res.data.result;
          let statelist = {
            0: "空闲",
            1: "派工中",
          };

          for (const item of this.contents) {
            item.userstate = statelist[item.userstate];
            this.$axios({
              method: "get",
              params: {
                username: item.username,
              },
              url: "/findAllWorkerOlders",
            })
              .then((res2) => {
                // console.log(res2.data.result);
                var stateArry = res2.data.result.map(function (currentValue) {
                  return currentValue.state;
                });

                for (const item2 of res2.data.result) {
                  if (stateArry.indexOf(1) != -1) {
                    item.userstate = 1;
                    this.$axios({
                      method: "post",
                      params: {
                        userstate: item.userstate,
                        username: item2.worker,
                      },
                      url: "/user/updateUserstate",
                    })
                      .then((res3) => {
                        console.log(res3.data.result);
                        item.userstate = 1;
                        item.userstate = statelist[item.userstate];
                      })
                      .catch((error) => {
                        console.log(error);
                      });
                  } else {
                    item.userstate = 0;

                    this.$axios({
                      method: "post",
                      params: {
                        userstate: item.userstate,
                        username: item2.worker,
                      },
                      url: "/user/updateUserstate",
                    })
                      .then((res4) => {
                        console.log(res4.data.result);
                        item.userstate = 0;
                        item.userstate = statelist[item.userstate];
                      })
                      .catch((error) => {
                        console.log(error);
                      });
                  }
                }
              })
              .catch((error) => {
                console.log(error);
              });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    handleEdit(index, row) {
      this.$axios({
        method: "get",
        params: {
          username: this.$store.state.user.username,
          powername: "user:edit",
        },
        url: "/user/UserPower",
      })
        .then((res) => {
          if (res.data.code == 200) {
            console.log(res);
            this.dialogFormVisible = true;
            this.form = row;
            this.index = index;
          } else {
            this.$message.success(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    pre(cpage) {
      console.log(cpage);
    },
    next(cpage) {
      console.log(cpage);
    },
    resetPass(index,row) {
     
      this.index = index;
      this.$axios({
        method: "get",
        params: {
          username: this.$store.state.user.username,
          powername: "user:restPass",
        },
        url: "/user/UserPower",
      })
        .then((res) => {
          if (res.data.code == 200) {
           console.log(row);
            this.$axios({
              method: "post",
              data: {
                username:row.username,
                salt:row.salt,
              },
              url: "/user/resetPass",
            })
              .then((res) => {
                console.log(res);
                this.$message.success("已重置密码");
              })
              .catch(function (error) {
                console.log(error);
              });
          } else {
            this.$message.success(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    updateWorkers() {
      this.$axios({
        method: "post",
        data: this.form,
        url: "/user/updateWorkers",
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.showTable();
            this.dialogFormVisible = false;
            this.$message.success("修改用户信息成功");
          }
        })
        .catch((error) => {
          this.$message.error("修改信息未成功");
          console.log(error);
        });
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    cancel() {
      this.dialogFormVisible = false;
      this.showTable();
    },

    handleDelete(row) {
      this.$axios({
        method: "get",
        params: {
          username: this.$store.state.user.username,
          powername: "user:deleteUser",
        },
        url: "/user/UserPower",
      })
        .then((res) => {
          if (res.data.code == 200) {
            if (confirm("您确定要删除该用户吗")) {
              this.$axios({
                method: "post",
                params: {
                  id: row.id,
                },
                url: "/user/deleteUser",
              })
                .then((res) => {
                  if (res.data.code == 200) {
                    this.$message.success("删除成功");
                    this.showTable();
                  }
                })
                .catch((error) => {
                  console.log(error);
                });
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped></style>
